import $ from './library/jquery.js';
import cookie from './library/cookie.js';

$('.Swap_ul>li>i').on('click', function() {
    $(this).toggleClass("actg");
});

$('.seven_count').on('click', '.minute', function(ev) {
    let input = $(ev.target).siblings('input');
    input.val((index, value) => --value);
    input.val() < 1 && input.val(1);
    input.trigger('change');
})
$('.seven_count').on('click', '.add', function(ev) {
    let input = $(ev.target).siblings('input');
    input.val((index, value) => ++value);
    input.val() > 10 && input.val(10);
    input.trigger('change');
})

let id = location.search.split('=')[1];

$.ajax({
    type: "get",
    url: "../../interface/getItem.php",
    data: { id: id },
    dataType: "json"
}).then(function(res) {
    let picture = JSON.parse(res.picture);

    let de_le_t = `<img src="../${picture[1].src}" alt="">`;
    $('.de_le_t').html(de_le_t);

    let de_le_b = `<ul class="de_le_ul">
                    <li><img src="../${picture[1].src}" alt=""></li>
                    <li><img src="../${picture[2].src}" alt=""></li>
                    <li><img src="../${picture[3].src}" alt=""></li>
                    <li><img src="../${picture[4].src}" alt=""></li>
                    <li><img src="../${picture[5].src}" alt=""></li>
                </ul>`;
    $('.de_le_b').html(de_le_b);

    let de_ri_one = `${res.title}`;
    $('.de_ri_one').html(de_ri_one);

    let de_ri_three = `${res.details}`;
    $('.de_ri_three').html(de_ri_three);

    let price = `<b>¥</b><span>${res.price}</span>`;
    $('.de_ri_four').html(price);

    let dr_color = `${res.color}`;
    $('.dr_color').html(dr_color);

    let dr_config = `${res.config}`;
    $('.dr_config').html(dr_config);

    let pic = `<div>
    <img src="../${picture[6].src}" alt="">
    <img src="../${picture[7].src}" alt="">
</div>
<div>
    <a href="#"><img src="../${picture[8].src}" alt=""></a>
    <a href="#"><img src="../${picture[9].src}" alt=""></a>
    <a href="#"><img src="../${picture[10].src}" alt=""></a>
</div>
<div>
    <img src="../${picture[11].src}" alt="">
    <img src="../${picture[12].src}" alt="">
    <img src="../${picture[13].src}" alt="">
    <img src="../${picture[14].src}" alt="">
    <img src="../${picture[15].src}" alt="">
    <img src="../${picture[16].src}" alt="">
    <img src="../${picture[17].src}" alt="">
    <img src="../${picture[18].src}" alt="">
    <img src="../${picture[19].src}" alt="">
    <img src="../${picture[20].src}" alt="">
    <img src="../${picture[21].src}" alt="">
    <img src="../${picture[22].src}" alt="">
    <img src="../${picture[23].src}" alt="">
    <img src="../${picture[24].src}" alt="">
    <img src="../${picture[25].src}" alt="">
    <img src="../${picture[26].src}" alt="">
</div>
<div>
    <img src="../${picture[27].src}" alt="">
    <img src="../${picture[28].src}" alt="">
    <img src="../${picture[29].src}" alt="">
    <img src="../${picture[30].src}" alt="">
    <img src="../${picture[31].src}" alt="">
    <img src="../${picture[32].src}" alt="">
    <img src="../${picture[33].src}" alt="">
</div>`;
    $('.tabs_pic').html(pic);


    $('.de_le_ul>li>img').on('click', function() {
        $('.de_le_t>img').attr('src', `${$(this).attr('src')}`);
    });



    $('body').find('#addItem').on('click', function() {
        addItem(res.id, $('#num').val());
    });
}).catch(function(xhr) {
    console.log(xhr.status)
});

function addItem(id, num) {
    let shop = cookie.get('shop'); // 获得购物车信息

    let product = {
        id,
        num
    };
    // 判断当前cookie中是否存有购物车数据
    if (shop) { // 如果有数据 数据将是字符串格式 
        shop = JSON.parse(shop); // 转对象（数组）

        // 判断购物车数据中是否已有某个id 如果有则修改数量 没有则添加
        if (shop.some(el => el.id === id)) {
            let _index = shop.findIndex(elm => elm.id === id); // 找到已存在数据的索引值
            let count = parseInt(shop[_index].num);
            count += parseInt(num);
            shop[_index].num = count;
        } else {
            shop.push(product);
        }

    } else { // 初始情况下没有数据
        shop = []; // 初始化一个数组
        shop.push(product); // 将商品加入购物车数据
    }

    cookie.set('shop', JSON.stringify(shop), 1);
}

let shop = cookie.get('shop');
shop = JSON.parse(shop);
let goods_num = shop.length;
$('.goods_num').html(`(${goods_num})`);